<template>
    <!-- 推荐 -->
    <div class="user-recommend">
        <div v-if="!isShow" style="width: 100%; font-size: 30px; text-align: center; margin-top: 20px;">
            <van-loading size="45px" type="spinner" color="#fe430d" vertical>
                吃货别急，美食马上为你呈现......
            </van-loading>
        </div>
        <div class="list">
            <ul v-for="(item, index) in list" :key="item.id">
                <li v-if="item.type === 3">
                    <div class="header">
                        <div class="user-name">
                            <img :src="item.note.author.p" :alt="item.note.author.p">
                            <span>{{ item.note.author.n }}</span>
                            <i>LV.{{ item.note.author.lv }}</i>
                        </div>
                        <div class="more">
                            <van-icon size="20" name="ellipsis" />
                        </div>
                    </div>
                    <div class="section">
                        <img v-if="typeof item.note.images.gif == 'undefined'" :src="item.note.image_u"
                            :alt="item.note.author.p">
                        <img v-else :src="item.note.images.gif" :alt="item.note.author.p">
                        <div class="favorite">
                            <div class="person">
                                <div class="p-f">
                                    <img v-for="(i, j) in item.note.collect_users" :key="i.id" :src="i.p" :alt="i.p"
                                        :style="{ 'margin-left': j > 0 ? '-7px' : '0' }">
                                </div>
                                <span>{{ item.note.like_count }}人点赞</span>
                            </div>
                            <!-- 收藏图标 -->
                            <div @click="toggleFavorite(item)" :key="index">
                                <van-icon v-if="!item.isFavorited" size="20" name="star-o" />
                                <van-icon v-else color="#f15023" size="20" name="star" />
                            </div>
                        </div>
                    </div>
                    <div class="footer">
                        <p>{{ item.note.title }}</p>
                    </div>
                </li>

                <li v-if="item.type === 1">
                    <div class="header">
                        <div class="user-name">
                            <img :src="item.r.a.p" :alt="item.r.a.p">
                            <span>{{ item.r.a.n }}</span>
                            <i>LV.{{ item.r.a.lvl }}</i>
                        </div>
                        <div class="more">
                            <van-icon size="20" name="ellipsis" />
                        </div>
                    </div>
                    <div class="section">
                        <img :src="item.r.img" :alt="item.r.img">
                        <div class="favorite">
                            <div class="person">
                                <div class="p-f">
                                    <img v-for="(i, j) in item.r.collect_users" :key="i.id" :src="i.p" :alt="i.p"
                                        :style="{ 'margin-left': j > 0 ? '-7px' : '0' }">
                                </div>
                                <span>{{ item.r.collect_count_text }}</span>
                            </div>
                            <!-- 喜欢图标 -->
                            <div @click="toggleLike(item)" :key="index">
                                <van-icon v-if="!item.isLiked" size="20" name="like-o" />
                                <van-icon v-else color="#f15023" size="20" name="like" />
                            </div>
                        </div>
                    </div>
                    <div class="footer">
                        <p>{{ item.r.trim_title }}</p>
                        <div class="topic">
                            <span><van-icon name="cash-o" /></span>
                            <span>{{ item.r.stdname }}</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div v-if="isShow" class="message">
            <p>等待请求数据......</p>
        </div>
    </div>
</template>

<script>
import { recommend } from '@/api';
export default {
    data() {
        return {
            isShow: false,
            list: [],
        }
    },
    methods: {
        toggleFavorite(item) {
            // 切换当前项目的收藏状态

            item.isFavorited = !item.isFavorited;
            // console.log(item.isFavorited);
        },
        toggleLike(item) {
            // 如果有喜欢状态，也可以类似处理
            item.isLiked = !item.isLiked;
            // console.log(item.isLiked);
        },
        async getUserRecommand() {
            await recommend()
                .then(
                    content => {
                        // console.log({ content });
                        let { state, result: { list } } = content;
                        if (state == "success") {
                            this.list = list.map((item, index) => {
                                if (item.id != null) {
                                    item.id = index;
                                }
                                // 初始化收藏状态
                                item.isFavorited = false;
                                // 如果有喜欢状态，可以初始化
                                item.isLiked = false;
                                return item;
                            })
                            // console.log(this.list);
                        }
                    }
                )
        }
    },
    created() {
        this.isShow = !this.isShow;
        this.getUserRecommand();
    }
}
</script>


<style lang="less" scoped>
@import url(../common/less/varible.less);

.user-recommend {
    font-size: 13px;

    .list {
        width: 100%;

        ul {
            width: 100%;

            li {
                width: 100%;
                padding: 10px 0;

                .header {
                    display: flex;
                    padding: @pad;
                    width: 100%;
                    height: 30px;
                    justify-content: space-between;
                    align-items: center;
                    // background-color: skyblue;
                    margin-bottom: 8px;

                    .user-name {

                        img {
                            width: 30px;
                            height: 30px;
                            border-radius: 50%;
                            vertical-align: middle;
                        }

                        span {
                            display: inline-block;
                            margin: 0 5px;
                            vertical-align: middle;
                            font-size: 12px;
                        }

                        i {
                            display: inline-block;
                            vertical-align: middle;
                            font-size: 8px;
                            font-weight: bold;
                            font-family: Arial, Helvetica, sans-serif;
                            color: #dfba54;
                            margin-left: 5px;
                            transform: translateY(2px);
                        }
                    }

                }

                .section {
                    width: 100%;

                    img {
                        width: 100%;
                        // height: 300px;
                        margin: 0 auto;
                    }

                    .favorite {
                        display: flex;
                        height: 30px;
                        width: 100%;
                        padding: @pad;
                        align-items: center;
                        justify-content: space-between;
                        font-size: 11px;
                        margin: 10px 0 3px 0;

                        .person {
                            display: flex;
                            align-items: center;

                            .p-f {
                                // width: 100px;
                                height: 20px;
                                overflow: hidden;

                                img {
                                    width: 20px;
                                    height: 20px;
                                    border-radius: 50%;
                                    vertical-align: middle;
                                }

                            }

                            span {
                                display: inline-block;
                                vertical-align: middle;
                                margin-left: 7px;
                            }


                        }
                    }
                }

                .footer {
                    width: 100%;
                    padding: @pad;
                    margin-bottom: 10px;

                    p {
                        margin: 6px 0 10px 0;

                        // 多行文本溢出变省略号
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;

                    }

                    .topic {
                        color: @fontColor;

                        span {
                            margin-right: 1px;
                        }
                    }
                }
            }
        }
    }

    .active {
        color: @bgColor;
    }

    .message {
        width: 100%;
        height: 100px;

        p {
            padding: 5px;
            text-align: center;
            color: #ccc;
            font-size: 15px;
        }
    }
}
</style>